<template>
  <div @click="onCity($event)">
    <van-nav-bar
      title="城市"
      @click-left="onClickLeft($event)"
      left-arrow
      fixed
      placeholder
      z-index="2"
    />
    <van-index-bar>
      <van-index-anchor index="A" />
      <template>
        <div v-for="a in A" :key="a.id">
          <van-cell :title="a.nm" />
        </div>
      </template>

      <van-index-anchor index="B" />
      <template>
        <div v-for="b in B" :key="b.id">
          <van-cell :title="b.nm" />
        </div>
      </template>

      <van-index-anchor index="C" />
      <template>
        <div v-for="c in C" :key="c.id">
          <van-cell :title="c.nm" />
        </div>
      </template>

      <van-index-anchor index="D" />
      <template>
        <div v-for="d in D" :key="d.id">
          <van-cell :title="d.nm" />
        </div>
      </template>

      <van-index-anchor index="E" />
      <template>
        <div v-for="e in E" :key="e.id">
          <van-cell :title="e.nm" />
        </div>
      </template>

      <van-index-anchor index="F" />
      <template>
        <div v-for="f in F" :key="f.id">
          <van-cell :title="f.nm" />
        </div>
      </template>

      <van-index-anchor index="G" />
      <template>
        <div v-for="g in G" :key="g.id">
          <van-cell :title="g.nm" />
        </div>
      </template>

      <van-index-anchor index="H" />
      <template>
        <div v-for="h in H" :key="h.id">
          <van-cell :title="h.nm" />
        </div>
      </template>

      <van-index-anchor index="I" />
      <template>
        <div v-for="i in I" :key="i.id">
          <van-cell :title="i.nm" />
        </div>
      </template>

      <van-index-anchor index="J" />
      <template>
        <div v-for="j in J" :key="j.id">
          <van-cell :title="j.nm" />
        </div>
      </template>

      <van-index-anchor index="K" />
      <template>
        <div v-for="k in K" :key="k.id">
          <van-cell :title="k.nm" />
        </div>
      </template>

      <van-index-anchor index="L" />
      <template>
        <div v-for="l in L" :key="l.id">
          <van-cell :title="l.nm" />
        </div>
      </template>

      <van-index-anchor index="M" />
      <template>
        <div v-for="m in M" :key="m.id">
          <van-cell :title="m.nm" />
        </div>
      </template>

      <van-index-anchor index="N" />
      <template>
        <div v-for="n in N" :key="n.id">
          <van-cell :title="n.nm" />
        </div>
      </template>

      <van-index-anchor index="O" />
      <template>
        <div v-for="o in O" :key="o.id">
          <van-cell :title="o.nm" />
        </div>
      </template>

      <van-index-anchor index="P" />
      <template>
        <div v-for="p in P" :key="p.id">
          <van-cell :title="p.nm" />
        </div>
      </template>

      <van-index-anchor index="Q" />
      <template>
        <div v-for="q in Q" :key="q.id">
          <van-cell :title="q.nm" />
        </div>
      </template>

      <van-index-anchor index="R" />
      <template>
        <div v-for="r in R" :key="r.id">
          <van-cell :title="r.nm" />
        </div>
      </template>

      <van-index-anchor index="S" />
      <template>
        <div v-for="s in S" :key="s.id">
          <van-cell :title="s.nm" />
        </div>
      </template>

      <van-index-anchor index="T" />
      <template>
        <div v-for="t in T" :key="t.id">
          <van-cell :title="t.nm" />
        </div>
      </template>

      <van-index-anchor index="U" />
      <template>
        <div v-for="u in U" :key="u.id">
          <van-cell :title="u.nm" />
        </div>
      </template>

      <van-index-anchor index="V" />
      <template>
        <div v-for="v in V" :key="v.id">
          <van-cell :title="v.nm" />
        </div>
      </template>

      <van-index-anchor index="W" />
      <template>
        <div v-for="w in W" :key="w.id">
          <van-cell :title="w.nm" />
        </div>
      </template>

      <van-index-anchor index="X" />
      <template>
        <div v-for="x in X" :key="x.id">
          <van-cell :title="x.nm" />
        </div>
      </template>

      <van-index-anchor index="Y" />
      <template>
        <div v-for="y in Y" :key="y.id">
          <van-cell :title="y.nm" />
        </div>
      </template>

      <van-index-anchor index="Z" />
      <template>
        <div v-for="z in Z" :key="z.id">
          <van-cell :title="z.nm" />
        </div>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { reqCity } from "@/api";
import { Toast } from "vant";
export default {
  name: "City",
  data() {
    return {
      citys: [],
      A: [],
      B: [],
      C: [],
      D: [],
      E: [],
      F: [],
      G: [],
      H: [],
      I: [],
      J: [],
      K: [],
      L: [],
      M: [],
      N: [],
      O: [],
      P: [],
      Q: [],
      R: [],
      S: [],
      T: [],
      U: [],
      V: [],
      W: [],
      X: [],
      Y: [],
      Z: [],
    };
  },
  methods: {
    onClickLeft(e) {
      e.stopPropagation();
      this.$router.go(-1);
      Toast("返回影院列表");
    },
    onCity(e) {
      if (!/^[A-Z]+$/.exec(e.target.innerText)) {
        this.$router.push("/cinema");
        this.$bus.$emit("changeNewCity", e.target.innerText);
      }
    },
  },
  mounted() {
    // 获取城市列表
    reqCity().then(
      (response) => {
        if (response) {
          this.citys = response.data.data; // 得到所有城市列表
          // 城市列表排序按照字母
          const propComparator = (propName) => (a, b) =>
            a[propName] == b[propName] ? 0 : a[propName] < b[propName] ? -1 : 1;
          this.citys.sort(propComparator(`py`));
          // 遍历数组中的每一项，使相同首字母的对象为一组
          this.citys.forEach((item) => {
            if (item.py.slice(0, 1) == "a") {
              this.A.push(item);
            } else if (item.py.slice(0, 1) == "b") {
              this.B.push(item);
            } else if (item.py.slice(0, 1) == "c") {
              this.C.push(item);
            } else if (item.py.slice(0, 1) == "d") {
              this.D.push(item);
            } else if (item.py.slice(0, 1) == "e") {
              this.E.push(item);
            } else if (item.py.slice(0, 1) == "f") {
              this.F.push(item);
            } else if (item.py.slice(0, 1) == "g") {
              this.G.push(item);
            } else if (item.py.slice(0, 1) == "h") {
              this.H.push(item);
            } else if (item.py.slice(0, 1) == "i") {
              this.I.push(item);
            } else if (item.py.slice(0, 1) == "j") {
              this.J.push(item);
            } else if (item.py.slice(0, 1) == "k") {
              this.K.push(item);
            } else if (item.py.slice(0, 1) == "l") {
              this.L.push(item);
            } else if (item.py.slice(0, 1) == "m") {
              this.M.push(item);
            } else if (item.py.slice(0, 1) == "n") {
              this.N.push(item);
            } else if (item.py.slice(0, 1) == "o") {
              this.O.push(item);
            } else if (item.py.slice(0, 1) == "p") {
              this.P.push(item);
            } else if (item.py.slice(0, 1) == "q") {
              this.Q.push(item);
            } else if (item.py.slice(0, 1) == "r") {
              this.R.push(item);
            } else if (item.py.slice(0, 1) == "s") {
              this.S.push(item);
            } else if (item.py.slice(0, 1) == "t") {
              this.T.push(item);
            } else if (item.py.slice(0, 1) == "u") {
              this.U.push(item);
            } else if (item.py.slice(0, 1) == "v") {
              this.V.push(item);
            } else if (item.py.slice(0, 1) == "w") {
              this.W.push(item);
            } else if (item.py.slice(0, 1) == "x") {
              this.X.push(item);
            } else if (item.py.slice(0, 1) == "y") {
              this.Y.push(item);
            } else if (item.py.slice(0, 1) == "z") {
              this.Z.push(item);
            }
          });
        }
      },
      (error) => {
        alert(error.message);
      }
    );
  },
};
</script>

<style scoped>
</style>